<template>
  <div class="leader-tags">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>团长标签</span>
        </div>
      </template>
      <div style="margin-bottom: 16px;">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="标签名称">
            <el-input v-model="searchForm.name" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">检索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="danger" @click="handleAdd">新建标签</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="pagedTags" style="width: 100%; margin-bottom: 16px;">
        <el-table-column prop="name" label="标签名称">
          <template #default="scope">
            <el-tag :type="scope.row.type" effect="plain">{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row, scope.$index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="filteredTags.length"
        :page-sizes="[5, 10, 20]"
        layout="prev, pager, next, ->, sizes"
        background
        style="margin-top: 8px;"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
      <div style="margin-top: 8px; color: #999; font-size: 14px;">
        当前条件共检索到 <span style="color:#f00">{{ filteredTags.length }}</span> 条相关信息
      </div>
    </el-card>
    <el-dialog v-model="addDialogVisible" title="新建标签" width="500px" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" style="margin-top: 8px;">
        <el-form-item label="标签名称" required>
          <el-input v-model="addForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addForm.desc" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="颜色" required>
          <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
            <el-radio-group v-model="addForm.type">
              <el-radio-button label="danger"><el-tag type="danger" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label="info"><el-tag type="info" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label="success"><el-tag type="success" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label="warning"><el-tag type="warning" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label=""><el-tag effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label=""><el-tag type=""><span style="color:#a259e6">标签</span></el-tag></el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="状态" required>
          <el-radio-group v-model="addForm.status">
            <el-radio-button label="正常"><span style="color:#f00">启用</span></el-radio-button>
            <el-radio-button label="禁用">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align:right;margin-top:24px;">
        <el-button @click="addDialogVisible=false">取消</el-button>
        <el-button type="danger" @click="handleAddConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="editDialogVisible" title="编辑标签" width="500px" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" style="margin-top: 8px;">
        <el-form-item label="标签名称" required>
          <el-input v-model="editForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editForm.desc" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="颜色" required>
          <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
            <el-radio-group v-model="editForm.type">
              <el-radio-button label="danger"><el-tag type="danger" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label="info"><el-tag type="info" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label="success"><el-tag type="success" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label="warning"><el-tag type="warning" effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label=""><el-tag effect="plain">标签</el-tag></el-radio-button>
              <el-radio-button label=""><el-tag type=""><span style="color:#a259e6">标签</span></el-tag></el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="状态" required>
          <el-radio-group v-model="editForm.status">
            <el-radio-button label="正常"><span style="color:#f00">启用</span></el-radio-button>
            <el-radio-button label="禁用">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align:right;margin-top:24px;">
        <el-button @click="editDialogVisible=false">取消</el-button>
        <el-button type="danger" @click="handleEditConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const STORAGE_KEY = 'leaderTagsList'

function loadTags() {
  const local = localStorage.getItem(STORAGE_KEY)
  if (local) {
    try {
      return JSON.parse(local)
    } catch {
      return []
    }
  }
  return [
    { name: '星级团长', type: 'danger', status: '正常' },
    { name: '品质团长', type: 'info', status: '正常' },
    { name: '品质社区', type: 'info', status: '正常' },
    { name: '客单量高', type: 'info', status: '正常' },
  ]
}

const allTags = ref(loadTags())
watch(allTags, (val) => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(val))
}, { deep: true })

const searchForm = ref({ name: '' })
const currentPage = ref(1)
const pageSize = ref(10)

const addDialogVisible = ref(false)
const addForm = ref({
  name: '',
  desc: '',
  type: 'danger',
  status: '正常',
})

const editDialogVisible = ref(false)
const editForm = ref({ name: '', desc: '', type: 'danger', status: '正常', index: -1 })

const filteredTags = computed(() => {
  if (!searchForm.value.name) return allTags.value
  return allTags.value.filter(tag => tag.name.includes(searchForm.value.name))
})
const pagedTags = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return filteredTags.value.slice(start, start + pageSize.value)
})
const handleSearch = () => {
  currentPage.value = 1
}
const handleReset = () => {
  searchForm.value.name = ''
  currentPage.value = 1
}
const handleAdd = () => {
  addDialogVisible.value = true
  addForm.value = { name: '', desc: '', type: 'danger', status: '正常' }
}
const handleAddConfirm = () => {
  if (!addForm.value.name) return
  allTags.value.unshift({
    name: addForm.value.name,
    type: addForm.value.type,
    status: addForm.value.status,
    desc: addForm.value.desc
  })
  addDialogVisible.value = false
}
const handleEdit = (row: any, idx?: number) => {
  // idx为当前行在allTags中的索引
  const index = typeof idx === 'number' ? idx : allTags.value.findIndex(t => t === row)
  editForm.value = { ...row, index }
  editDialogVisible.value = true
}
const handleEditConfirm = () => {
  const idx = editForm.value.index
  if (idx >= 0) {
    allTags.value[idx] = {
      name: editForm.value.name,
      desc: editForm.value.desc,
      type: editForm.value.type,
      status: editForm.value.status
    }
  }
  editDialogVisible.value = false
}
const handlePageChange = (val: number) => {
  currentPage.value = val
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
}
</script>

<style scoped>
.leader-tags {
  padding: 20px;
}
.box-card {
  width: 100%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 